import store from "./Store";
//引入的action
import { deposit, withDraw } from "./Store/Actions/Bank";

import { useState, useEffect } from "react"
const ReduxCom = () => {
    let [money, setMoney] = useState(store.getState().bank)

    function handleDeposit() { //点击存钱的事件处理函数
        //变更store中state的唯一方式就是通过dispatch派发action来更改
        store.dispatch(deposit)
        // console.log(store.getState())
    }

    useEffect(() => {
        store.subscribe(function () {
            console.log('状态更新了')
            setMoney(store.getState().bank)
        })
    }, []);
    //处理退钱的事件处理函数

    function handleWithDraw() {
        store.dispatch(withDraw)
    }

    return (
        <fieldset>
            <legend>reduxDemo</legend>
            <h1>余额:${money}</h1>
            <button onClick={handleDeposit}>Deposit 存钱</button>
            <button onClick={handleWithDraw}>WithDrwa 退钱</button>
        </fieldset>
    )
}

export default ReduxCom